<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        div#d1{
            border: 1px solid black;
            margin-top: 100px;
            margin-bottom: 100px;
            margin-right: 150px;
            margin-left: 80px;
            background-color: lightblue;
        }
        /*您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。*/
        div#d2{
            border: 1px solid red;
            margin: 100px 150px 100px 80px;
        }
        p.p1{
            margin-left: inherit;
        }
    </style>
</head>
<body>
<div id="d1">这个 div 元素的上外边距为 100 像素，右外边距是 150 像素，下外边距是 100 像素，左外边距是 80 像素。</div>
<div id="d2">auto
    <p class="p1">使用 inherit 值</p>
</div>
</body>
</html>